<style scoped></style>

<template>
    <h1>{{ show() }}</h1>
    <h1>{{ show() }}</h1>
    <hr>
    <h1>{{ total }}</h1>
    <h1>{{ total }}</h1>
</template>

<script lang="ts" setup>

import { computed } from 'vue';

const show = ()=>{
    console.log("show ...");
    return 10;
}
// 计算属性, 同一次的结果只会计算一次。 缓存到内存中。 
const _total = ()=>{
    console.log("total ...");
    return 100;
}
const total = computed(_total); // 对 total 进行计算属性的封装, 将 _total的函数计算的结果放到内存
</script>